<!DOCTYPE html>
<html>
  <head>
      <title>{{ site.title }}</title>
      {{include 'components/import'}}
      <!-- <link rel="stylesheet" href="/stylesheets/bootst/bootstrap.min.css"> -->
      <link rel="stylesheet" href="/stylesheets/defaultstyle.css">
    <script>
      $(function(){
        $('#StoreTab a').click(function (e) {
          e.preventDefault()
          $(this).tab('show')
        })

      })
    </script>

  </head>
  <body>
      <!-- {{include 'components/site-nav'}} -->
      {{include 'components/header'}}
      <!-- {{ pub_info }} -->
      <!-- {{ query_state }} -->

    <!-- Nav tabs -->
    <div class="list-tab container-fluid" id="StoreTab">
      <ul class="nav container" role="tablist">
        <li data-infotype="Attorn" role="presentation" class="active"><a href="#attorn" role="tab" data-toggle="tab">商铺转让</a></li>
        <!-- <li role="presentation"><a href="#sale" role="tab" data-toggle="tab">商铺租售</a></li> -->
        <li data-infotype="SeekLease" role="presentation"><a href="#want" role="tab" data-toggle="tab">求租求购</a></li>
      </ul>
    </div>


    <!-- Tab panes -->
    <div class="tab-content container">
      <div role="tabpanel" class="tab-pane active" id="attorn">
        <div class="list-type">


          <dl class="dl-horizontal">
            <dt>行政区：</dt>
            <dd>
                  <div id="ward">

                  </div>
            </dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>地铁线：</dt>
            <dd>
                <div id="line">


                </div>
            </dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>商圈：</dt>
            <dd>
              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane" id="business">...</div>
              </div>
            </dd>
          </dl>
          <dl class="dl-horizontal" id="category">
            <dt>行业：</dt>
            <dd>
              <a href="javascript:;">行业不限</a>
              <div class="con">
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="酒楼餐饮"> 酒楼餐饮<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="美容美发"> 美容美发<small>(51)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="服饰鞋包"> 服饰鞋包<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="专柜转让"> 专柜转让<small>(3)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="休闲娱乐"> 休闲娱乐<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="百货超市"> 百货超市<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="生活服务"> 生活服务<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="电子通讯"> 电子通讯<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="汽修美容"> 汽修美容<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="医药保健"> 医药保健<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="家居建材"> 家居建材<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="教育培训"> 教育培训<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="旅馆宾馆"> 旅馆宾馆<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="公司工厂"> 公司工厂<small>(32)</small>
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" name="categoryCheckbox" id="inlineCheckbox1" value="其他"> 其他<small>(32)</small>
                </label>
              </div>
            </dd>
          </dl>
          <dl class="dl-horizontal" id="store-type">
            <dt>类型：</dt>
            <dd>
              <a href="javascript:;">类型不限</a>
              <div class="con">
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="商业街商铺"> 商业街商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="市场类商铺"> 市场类商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="社区商铺"> 社区商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="百货商场、购物中心商铺"> 百货商场、购物中心商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="商务楼、写字楼商铺"> 商务楼、写字楼商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="交通设施商铺"> 交通设施商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="其他"> 其他
                  </label>
              </div>
            </dd>
          </dl>
        </div>

        <div class="list-con pub-content">
          <!-- <div class="item row" onclick="javascript:window.location.href='detail_01.htm'">
            <div class="col-lg-7 col-md-6 col-sm-6 col-xs-7 base">
              <div class="media">
                <div class="media-left">
                  <div><div class="point">优选</div><img src="/images/store-pic.jpg"></div>
                </div>
                <div class="media-body">
                  <h4 class="media-heading"><span>[ 转让 ]</span><strong>淮海路与中山南路路口三楼顶级黄金商铺人流大</strong></h4>
                  <div class="info">
                    <span class="att ok"><i class="fa fa-check"></i>腾铺认证信息</span>
                    <span class="time"><i class="fa fa-clock-o"></i>刚刚</span>
                  </div>
                  <div class="pos">
                    <p><span>白下 淮海路</span><span>淮海路与中山南路路口</span></p>
                    <p><span>商业街卖场</span><span>其他</span></p>
                  </div>
                  <div class="do">
                    <a href="#"><i class="fa fa-heart-o"></i>收藏</a>
                    <a href="#"><i class="fa fa-exchange"></i>加入对比</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-xs-3 rent">
              <p>
                <small>转让费用</small>
                <strong>35</strong><span>万元</span>
              </p>
              <p>
                <small>租金费用</small>
                <strong>178300</strong><span>元/月</span>
              </p>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 size">
              <small class="hidden">总面积</small>
              <strong>102</strong>
              <span>m<sup>2</sup></span>
              <span class="btn btn-default">空转</span>
            </div>
          </div> -->
          <div class="cut row">
              {{ if adsenses.Search.length > 0 }}
                  {{ each adsenses.Search data }}
                  <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                    <div class="item-store media">
                      <div class="media-left">
                          <div style="width:100px;height:75px;overfllow:hidden;">
                              <img style="width:100%;height:auto;" src="{{ data.images[0] | watermark}}" alt="">
                          </div>

                      </div>
                      <div class="media-body">
                        <a href="/{{ site.subDomain }}/detail/{{data._id.toString()}}">
                            <h4 class="media-heading">{{ data.title }}</h4>
                            <p>
                                <strong>
                                    {{ if data.infoType == 'Attorn '}}
                                    [转让]
                                    {{ else }}
                                    [求租]
                                    {{ /if }}
                                </strong>
                                <span>{{ data.estate.district }}  {{ data.estate.shopArea }}</span><span>{{ data.estate.type }}</span>
                            </p>
                            <p><span><strong>{{ data.estate.area }}</strong>m<sup name="">2</sup></span>
                            <span><strong>{{ data.estate.rental }}</strong>元/月</span></p>
                        </a>

                      </div>
                    </div>
                  </div>
                  {{ /each }}
              {{ /if }}
          </div>
          {{ if pub_info }}
          {{ if query_state.infoType == 'Attorn' }}
          {{ each pub_info.pageDatas data }}
          <div class="item row">
              <div class="col-lg-7 col-md-6 col-sm-6 col-xs-7 base">
                  <div class="media">
                      <div class="media-left">

                          <div>
                              {{ if data.isPreference == true }}
                              <div class="point">优选</div>
                              {{ /if}}
                              <img src="{{ data.images[0] | watermark}}">
                          </div>
                      </div>
                      <div class="media-body">
                          <h4 class="media-heading"><span>[ 转让 ]</span><strong class="detai-href" data-did="{{@ data._id}}"><a data-pubid="{{@ data._id}}" href="/{{ site.subDomain }}/detail/{{@ data._id}}">{{ data.title }}</a></strong></h4>
                          <div class="info">
                              {{ if data.infoSource == 'TENGPU' }}
                              <span class="att ok"><i class="fa fa-check"></i>腾铺认证信息</span>
                              {{ else }}
                              <span class="att">网友个人信息</span>
                              {{ /if }}
                              <span class="time">
                                  <i class="fa fa-clock-o"></i>
                                  {{ data.createdAt | dateFormat }}
                              </span>
                          </div>
                          <div class="pos">
                              <p><span>{{ data.estate.district }}</span><span>{{ data.estate.shopArea }}</span></p>
                              <p><span>{{ data.estate.type }}</span></p>
                          </div>
                          <div class="do">
                              {{ if userinfo }}
                                 <!-- {{ userinfo.pub }} -->
                                 {{ if userinfo.pub &&  userinfo.pub.toString().indexOf(data._id.toString()) != -1 }}
                                     <span data-pid="{{@ data._id}}"><i class="fa fa-heart"></i>已收藏</span>
                                     {{ else }}
                                     <span class="follow-message" data-pid="{{@ data._id}}"><i class="fa fa-heart-o"></i>收藏</span>
                                 {{ /if }}
                                 {{ else }}
                                <a href="/{{site.subDomain}}/signin"><span><i class="fa fa-heart-o"></i>收藏</span></a>

                              {{ /if }}
                              <a class="detail-exchange" data-pid="{{@ data._id }}" href="javascript:;"><i class="fa fa-exchange"></i>加入对比</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-4 col-sm-4 col-xs-3 rent">
                  <p>
                      <small>转让费用</small>
                      {{if data.estate.canBargaining }}
                      <strong>面议</strong>
                      {{/if}}
                      <span>{{data.estate.transferFee}}万元</span>
                  </p>
                  <p>
                      <small>租金费用</small>
                      <strong>{{data.estate.rental}}</strong>
                      <span>元/月</span>
                  </p>
              </div>
              <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 size">
                  <span class="hidden">总面积</span>
                  <strong>{{ data.estate.area}}</strong>
                  <span>m<sup>2</sup></span>
              </div>
          </div>
          {{ /each }}
          {{ /if }}
          {{ /if }}

          <nav>
            <ul class="pagination pagination-lg">
              <li class="disabled"><a href="#">«</a></li>
              <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">»</a></li>
           </ul>
          </nav>
        </div>
      </div>

      <div role="tabpanel" class="tab-pane" id="want">
        <div class="list-type">
          <!-- <dl class="dl-horizontal">
            <dt>分类：</dt>
            <dd>
              <div class="con">
                <label class="radio-inline">
                  <input type="radio" name="optionsRadios" id="radio" value="option1"> 求租<small>(32)</small>
                </label>
                <label class="radio-inline">
                  <input type="radio" name="optionsRadios" id="radio" value="option2"> 求购<small>(51)</small>
                </label>
              </div>
            </dd>
          </dl> -->

          <dl class="dl-horizontal">
            <dt>行政区：</dt>
            <dd>
                  <div id="ward-3">

                  </div>
            </dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>地铁线：</dt>
            <dd>
                <div id="line-3">


                </div>
            </dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>商圈：</dt>
            <dd>
              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane" id="business-3">...</div>
              </div>
            </dd>
          </dl>
          <dl class="dl-horizontal" id="store-type-3">
            <dt>类型：</dt>
            <dd>
              <a href="javascript:;">类型不限</a>
              <div class="con">
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="商业街商铺"> 商业街商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="市场类商铺"> 市场类商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="社区商铺"> 社区商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="百货商场、购物中心商铺"> 百货商场、购物中心商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="商务楼、写字楼商铺"> 商务楼、写字楼商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="交通设施商铺"> 交通设施商铺
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="storetype" value="其他"> 其他
                  </label>
              </div>
            </dd>
          </dl>
        </div>

        <div class="list-con">
            <div class="cut row">
                {{ if adsenses.Search.length > 0 }}
                    {{ each adsenses.Search data }}
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                      <div class="item-store media">
                        <div class="media-left">
                            <div style="width:100px;height:75px;overfllow:hidden;">
                                <img style="width:100%;height:auto;" src="{{ data.images[0] }}" alt="">
                            </div>

                        </div>
                        <div class="media-body">
                            <a href="/{{ site.subDomain }}/detail/{{data._id.toString()}}">
                              <h4 class="media-heading">{{ data.title }}</h4>
                              <p>
                                  <strong>
                                      {{ if data.infoType == 'Attorn '}}
                                      [转让]
                                      {{ else }}
                                      [求租]
                                      {{ /if }}
                                  </strong>
                                  <span>{{ data.estate.district }}  {{ data.estate.shopArea }}</span><span>{{ data.estate.type }}</span>
                              </p>
                              <p><span><strong>{{ data.estate.area }}</strong>m<sup name="">2</sup></span>
                              <span><strong>{{ data.estate.rental }}</strong>元/月</span></p>
                          </a>
                        </div>
                      </div>
                    </div>
                    {{ /each }}
                {{ /if }}
            </div>
         {{ if pub_info }}
         {{ if query_state.infoType == 'SeekLease'}}
         {{ each pub_info.pageDatas data }}
         <div class="item row need">
           <div class="col-lg-6 col-md-5 col-sm-5 col-xs-6 base">
             <div class="media">
               <div class="media-body">
                 <h4 class="media-heading"><span>[ 求租 ]</span><strong class="detai-href" data-did="{{@ data._id}}"><a data-pubid="{{@ data._id}}" href="/{{ site.subDomain }}/detail/{{@ data._id}}">{{ data.title }}</a></strong></h4>
                 <div class="info">
                   {{ if data.infoSource == 'TENGPU' }}
                   <span class="att ok"><i class="fa fa-check"></i>腾铺认证信息</span>
                   {{ else }}
                   <span class="att">网友个人信息</span>
                   {{ /if }}
                   <span class="time"><i class="fa fa-clock-o"></i>
                    {{ data.createdAt | dateFormat }}
                   </span>
                 </div>
                 <div class="pos">
                   <p><span>{{ data.estate.district[0] }}</span><span>{{ data.estate.shopArea[0] }}</span></p>
                   <p><span>{{ data.estate.type[0] }}</span></p>
                 </div>
                 <div class="do">
                     {{ if userinfo }}
                        <!-- {{ userinfo.pub }} -->
                        {{ if userinfo.pub &&  userinfo.pub.toString().indexOf(data._id.toString()) != -1 }}
                            <span data-pid="{{@ data._id}}"><i class="fa fa-heart"></i>已收藏</span>
                            {{ else }}
                            <span class="follow-message" data-pid="{{@ data._id}}"><i class="fa fa-heart-o"></i>收藏</span>
                        {{ /if }}
                        {{ else }}
                       <a href="/{{site.subDomain}}/signin"><span><i class="fa fa-heart-o"></i>收藏</span></a>

                     {{ /if }}
                 </div>
               </div>
             </div>
           </div>
           <div class="col-lg-3 col-md-4 col-sm-4 col-xs-3 rent">
             <p>
               <small >租金</small>
               <strong>{{ data.estate.rental.min }}</strong>
               <strong>{{ data.estate.rental.max }}</strong>
               <span>元/月</span>
             </p>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 size">
             <small class="hidden">面积</small>
             <strong>{{ data.estate.area.max }}</strong>
             <span>m<sup>2</sup></span>
           </div>
         </div>
         {{ /each }}
         {{ /if }}
         {{ /if }}

          <nav>
            <ul class="pagination pagination-lg">
              <li class="disabled"><a href="#">«</a></li>
              <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">»</a></li>
           </ul>
          </nav>
        </div>
      </div>
      <a href="javascript:;" class="btn btn-match ratio" target="_blank"><i>0</i>对比</a>
    </div>
    {{include 'components/footer'}}
    <script>
    var cityDatas = {
        city: CITY_ID,
        areas: {},
        subways: {}
    };
    var storePublishInfo = {
        step: 1
    };
    var $area = $('#area');
    var $storeTypeCheck = $('#store-type');
    var infoType = 'Attorn';
    var allArea = $('#area li');
    var $tabList = $('a[href="#ward"]');
    var areaWrap = $('#ward');
    var areaShopWrap = $('#business');
    var subwayWrap = $('#line');
    var subwayStationWrap = $('.subStation .con');
    var $rentmax = $('#rent-max');
    var $rentmin = $('#rent-min');
    var $measuremax = $('#measure-max');
    var $measuremin = $('#measure-min');
    var query_info = {{@ query_info }}?{{@ query_info }}:'';
    // 创建区域选择框
    var areaname = '';
    var subname = '';
    var shopname = '';
    var newcate = [];
    var transfer = '';
    var measuremin = '';
    var measuremax = '';
    var measuremin = '';
    var rentmin = '';
    var rentmax = '';
    var measure = '';
    var rental = '';
    var empty = '';
    var barg = ''
    if (query_info) {
        infoType = query_info.infoType;
        subname = query_info["estate.subway"]?query_info["estate.subway"]:'';
        shopname = query_info['estate.shopArea']?query_info['estate.shopArea']:'';
        transfer = query_info["estate.transferFee"]?query_info["estate.transferFee"]:'';
        empty = query_info["estate.canEmptyAttorn"]?true:'';
        barg = query_info["estate.canBargaining"]?true:'';
        if(query_info.infoType == 'Attorn') {
            measuremin = '';
            measuremax = query_info["estate.area"]?query_info["estate.area"][1]:'';
            measuremin = query_info["estate.area"]?query_info["estate.area"][0]:'';
            rentmin = query_info["estate.rental"]?query_info["estate.rental"][0]:'';
            rentmax = query_info["estate.rental"]?query_info["estate.rental"][1]:'';
        } else {
            measuremin = '';
            measuremax = query_info["estate.area.max"]?query_info["estate.area.max"][1]:'';
            measuremin = query_info["estate.area.max"]?query_info["estate.area.max"][0]:'';
            rentmin = query_info["estate.rental.max"]?query_info["estate.rental.max"][0]:'';
            rentmax = query_info["estate.rental.max"]?query_info["estate.rental.max"][1]:'';
        }

        setinfotype()
    } else {
        getBusinessData();
    }
    if (measuremin && measuremax) {
        measure = [measuremin*1,measuremin*1];
    }
    if (rentmin && rentmax) {
        rental = [rentmin*1,rentmax*1];
    }
    $('#StoreTab').on('click','li',function(){
        infoType = $(this).data('infotype');
        // setinfotype();
        setquery(empty,barg,[],[]);
    })
    function setinfotype() {
        if (infoType == 'Attorn') {
            $('#StoreTab li[data-infotype='+infoType+']').addClass('active');
            $('#StoreTab li[data-infotype='+infoType+']').siblings('li').removeClass('active');
            $('#attorn').addClass('active');
            $('#want').removeClass('active');
            $area = $('#area');
            $tabList = $('a[href="#ward"]');
            $rentmax = $('#rent-max');
            $rentmin = $('#rent-min');
            $measuremax = $('#measure-max');
            $measuremin = $('#measure-min');
            $storeTypeCheck = $('#store-type');
            allArea = $('#area li');
            areaWrap = $('#ward');
            areaShopWrap = $('#business');
            subwayWrap = $('#line');
            subwayStationWrap = $('.subStation .con');
            query_info = query_info.infoType == infoType?query_info:'';
            getBusinessData();
        } else if(infoType == 'SeekLease') {
            $('#StoreTab li[data-infotype='+infoType+']').addClass('active');
            $('#StoreTab li[data-infotype='+infoType+']').siblings('li').removeClass('active');
            $('#want').addClass('active');
            $('#attorn').removeClass('active');
            $area = $('#area-3');
            $tabList = $('a[href="#ward-3"]');
            $rentmax = $('#rent-max-3');
            $rentmin = $('#rent-min-3');
            $measuremax = $('#measure-max-3');
            $measuremin = $('#measure-min-3');
            $storeTypeCheck = $('#store-type-3');
            allArea = $('#area-3 li');
            areaWrap = $('#ward-3');
            areaShopWrap = $('#business-3');
            subwayWrap = $('#line-3');
            subwayStationWrap = $('.subStation .con');
            query_info = query_info.infoType == infoType?query_info:'';
            getBusinessData();
        }
    }

    // 获取当前城市商圈数据
    function getBusinessData(callback) {
        var sessionCity = '';
        // var sessionCity = sessionStorage.getItem('city-infos');
        if (sessionCity) {
            cityDatas = JSON.parse(sessionCity);

            console.log(cityDatas);

            buildBusinessData();

            // callback && callback();
        } else {
            $.ajax({
                type: "GET",
                url: SITE_ADDR + "/city/" + cityDatas.city,
                success: function success(data, textStatus) {
                    console.log(data);

                    cityDatas.areas = data.areas;
                    cityDatas.subways = data.subways;

                    sessionStorage.setItem('city-infos', JSON.stringify(data));

                    buildBusinessData();

                    // callback && callback();
                }
            });
        }
    }

    function buildBusinessData() {
        // 行政区

        // console.log(query_info["estate.district"]);
        if (cityDatas && cityDatas.areas && cityDatas.areas.length > 0) {
            buildAreaDataHTML(query_info["estate.district"]);
            // console.log({{@ query_info }})
            areaWrap.on('change', 'input[name=areaRadio]', function () {
                var areaIndex = $('input[name=areaRadio]:checked').val();
                areaname = cityDatas.areas[areaIndex].name;
                console.log('checked radio: ', cityDatas.areas[areaIndex].name);
                var cate = '123';
                if (areaIndex){
                    setquery(empty,barg,storeArr,'','',areaname);
                }
                storePublishInfo.area = cityDatas.areas[areaIndex].name;
                storePublishInfo.areaIndex = areaIndex;
                storePublishInfo.areaShop = '';

                buildShopDataHTML(areaIndex,query_info['estate.shopArea']);
            });

            areaShopWrap.on('change', 'input[name=areaShopRadio]', function () {
                var areaShopName = $('input[name=areaShopRadio]:checked').val();

                storePublishInfo.areaShop = areaShopName;
            });
        } else {
            bootbox.alert('商圈数据获取失败，请稍后再尝试');
        }

        // 地铁线
        if (cityDatas && cityDatas.subways && cityDatas.subways.length > 0) {
            buildSubwayDataHTML(query_info["estate.subway"]);

            subwayWrap.on('change', 'input[name=subwayRadio]', function () {
                var subwayIndex = $('input[name=subwayRadio]:checked').val();
                subname = cityDatas.subways[subwayIndex].name;
                console.log('checked radio: ', subwayIndex);
                if (subwayIndex){
                    setquery(empty,barg,storeArr,'','',areaname,'',subname);
                }
                storePublishInfo.subway = cityDatas.subways[subwayIndex].name;
                storePublishInfo.subwayIndex = subwayIndex;
                storePublishInfo.subwayStation = '';

                // buildStationDataHTML(subwayIndex);
            });

            subwayStationWrap.on('change', 'input[name=subwayStationRadio]', function () {
                var stationName = $('input[name=subwayStationRadio]:checked').val();

                storePublishInfo.subwayStation = stationName;
            });
        }
    }
    // 根据行政区数据创建html
    function buildAreaDataHTML(area, areaIndex, areaShop) {
        var areaHtmlStr = [];

        cityDatas.areas.forEach(function (item, idx) {
            if (area && area == item.name) {

                areaHtmlStr.push('<label class="radio-inline"><input type="radio" name="areaRadio" checked="checked" value="' + idx + '">' + item.name + '</label>');
                allArea.removeClass('active');
                $tabList.parents('li').addClass('active');
                $tabList.find('a').attr('aria-expanded',true);
                areaWrap.addClass('active');
            } else {
                areaHtmlStr.push('<label class="radio-inline"><input type="radio" name="areaRadio" value="' + idx + '">' + item.name + '</label>');
            }
        });

        areaWrap.html(areaHtmlStr.join(''));
        areaShopWrap.html('').hide();
        var areaIndex = $('input[name=areaRadio]:checked').val();
        if (query_info && areaIndex) {
            areaname = cityDatas.areas[areaIndex].name;
            console.log('checked radio: ', cityDatas.areas[areaIndex].name);
            var cate = '123';
            storePublishInfo.area = cityDatas.areas[areaIndex].name;
            storePublishInfo.areaIndex = areaIndex;
            storePublishInfo.areaShop = '';

            buildShopDataHTML(areaIndex, query_info['estate.shopArea']);
        }

        // if (area && cityDatas.areas[areaIndex]) {
        //     buildShopDataHTML(areaIndex, areaShop);
        // }
    }

    // 根据商圈数据创建html

    function buildShopDataHTML(areaIndex, areaShop) {
        if ('全城' == cityDatas.areas[areaIndex].name) {
            areaShopWrap.html('').hide();
            return;
        }

        var shopAreas = cityDatas.areas[areaIndex].shopAreas;

        var shopStr = [];

        shopAreas.forEach(function (item, index) {
            if (areaShop && areaShop == item.name) {
                shopStr.push('<label class="radio-inline"><input type="radio" name="areaShopRadio" checked="checked" value="' + item.name + '">' + item.name + '</label>');
            } else {
                shopStr.push('<label class="radio-inline"><input type="radio" name="areaShopRadio" value="' + item.name + '">' + item.name + '</label>');
            }
        });

        areaShopWrap.html(shopStr.join('')).show();
        areaShopWrap.on('change','input[name=areaShopRadio]',function(){
            shopname = $('input[name=areaShopRadio]:checked').val();
            shopname = shopname == '全部'?'':shopname;
            setquery(empty,barg,storeArr,'','',areaname,shopname,subname)
            // console.log(shopIndex)
        });
    }

    // 根据地铁数据创建html
    function buildSubwayDataHTML(subway, subwayIndex, subwayStation) {
        var subwayHtmlStr = [];

        cityDatas.subways.forEach(function (item, idx) {
            if (subway && subway == item.name) {
                subwayHtmlStr.push('<label class="radio-inline"><input type="radio" name="subwayRadio" checked="checked" value="' + idx + '">' + item.name + '</label>');
            } else {
                subwayHtmlStr.push('<label class="radio-inline"><input type="radio" name="subwayRadio" value="' + idx + '">' + item.name + '</label>');
            }
        });

        subwayWrap.html(subwayHtmlStr.join(''));
        subwayStationWrap.html('').hide();

        if (subway && cityDatas.subways[subwayIndex]) {
            buildStationDataHTML(subwayIndex, subwayStation);
        }
    }

    // 更具地铁线路创建站点html
    function buildStationDataHTML(subwayIndex, station) {
        var subwayStations = cityDatas.subways[subwayIndex].stations;

        var stationsStr = ['<h5>站点:</h5>'];

        subwayStations.forEach(function (item, index) {
            if (station && station == item) {
                stationsStr.push('<label class="radio-inline"><input type="radio" name="subwayStationRadio" checked="checked" value="' + item + '">' + item + '</label>');
            } else {
                stationsStr.push('<label class="radio-inline"><input type="radio" name="subwayStationRadio" value="' + item + '">' + item + '</label>');
            }
        });

        subwayStationWrap.html(stationsStr.join('')).show();
    }

    allArea.on('click',function(){
        if ($(this).find('a').html() == '区域不限') {
            areaShopWrap.html('').hide();
        }
    });
    // 获取行业数据
    if (query_info) {
        var cate = query_info.category?query_info.category:[];
        var storeArr = query_info['estate.type']?query_info['estate.type']:[];
        var checkbox = $('#category input[name=categoryCheckbox]');
        console.log(checkbox);
        console.log(cate);
        if (cate.length > 0) {
            for (var i = 0; i < checkbox.length; i++) {
                cate.forEach(function (item, index) {
                    if ( item == checkbox[i].value) {
                        $(checkbox[i]).attr('checked','true')
                    }
                });
            }
        }
        var storeArrCheck = $storeTypeCheck.find('input[name=storetype]');
        if (storeArr.length > 0) {
            for (var i = 0; i < storeArrCheck.length; i++) {
                storeArr.forEach(function (item, index) {
                    if ( item == storeArrCheck[i].value) {
                        $(storeArrCheck[i]).attr('checked','true')
                    }
                });
            }
        }
    }
    var categoryCheckbox = $('#category input[name=categoryCheckbox]');
    for (var i = 0; i < categoryCheckbox.length; i++) {
        if (categoryCheckbox[i].checked) {
            newcate.push(categoryCheckbox[i].value);
        }
    }
    var $empty = $('#empty');
    var $my = $('#my');
    $empty.on('click',function(){
        if (this.checked) {
            empty = true;
        } else {
            empty = '';
        }
        setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname);
    })
    $my.on('click',function(){
        if (this.checked) {
            barg = true;
        } else {
            barg = '';
        }
        setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname);
    })
    var $clearData = $('.clear-data');
    function clearData(self){
        console.log(self);
        $(self).siblings('input').val('')
    }
    $clearData.on('click',function(){
        clearData(this);
    });
    // var $storeTypeCheckBox = $storeTypeCheck.find('input[name=storetype]')
    // for (var i = 0; i < $storeTypeCheckBox.length; i++) {
    //     if ($storeTypeCheckBox[i].checked) {
    //         storeArr.push($storeTypeCheckBox[i].value);
    //     }
    // }
    $('#category').on('change','input[name=categoryCheckbox]',function(){
        newcate = [];
        var b = $('#category input[name=categoryCheckbox]');
        for (var i = 0; i < b.length; i++) {
            if (b[i].checked) {
                newcate.push(b[i].value);
            }
        }
        setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname);
    })
    $storeTypeCheck.on('change','input[name=storetype]',function(){
        storeArr = [];
        var b = $storeTypeCheck.find('input[name=storetype]');
        for (var i = 0; i < b.length; i++) {
            if (b[i].checked) {
                storeArr.push(b[i].value);
            }
        }
        setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname);
    })
    $('#transfer').blur(function(){
            var string = this.value*1;
            setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname,string);

    });

    $rentmax.blur(function(){
        rentmin = $rentmin.val()?$rentmin.val():"0";
        rentmax = this.value;
        console.log('失去焦点啦👦')
        console.log(this.value)
        if (this.value) {
            rental = [rentmin*1,rentmax*1];
            setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname,transfer,measure,rental)
        }
    });

    $measuremax.blur(function(){
        measuremin = $measuremin.val()?$measuremin.val():"0";
        measuremax = this.value;
        console.log('失去焦点啦👦')
        console.log(this.value)
        if (this.value) {
            measure = [measuremin*1,measuremax*1];
            setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname,transfer,measure,rental)
        }
    });
    var regionNoLimit = $('#region-nolimit');
    regionNoLimit.on('click',function(){
        setquery(empty,barg,storeArr,newcate,'','','','',transfer,measure,rental)
    })
    // function setquerytest(storetype,cate,estateType,district,shopArea,subway,transferFee,area,rental,sortrule,pageindex) {
    //     var query = null;
    //     if (infoType == 'Attorn') {
    //         query = {
    //               category: cate.length > 0?{$in:cate}:{$exists:true}, // 行业
    //               infoType: infoType, // 转让
    //               estateType: estateType?estateType:{$exists:true}, // 行业类型
    //               "estate.district": district?district:{$exists:true}, // 行政区
    //               "estate.shopArea": shopArea?shopArea:{$exists:true}, // 商圈
    //               "estate.subway": subway?subway:{$exists:true}, // 地铁
    //               "estate.transferFee": transferFee?transferFee:{$exists:true}, // 转让费
    //               "estate.area": area?area:{$exists:true}, // 面积
    //               "estate.rental":rental?rental:{$exists:true}, // 租金
    //               "estate.type":storetype.length > 0?{$in:storetype}:{$exists:true}, // 商铺类型
    //               "estate.city":CITY
    //         }
    //     } else {
    //         query = {
    //               category: cate.length > 0?{$in:cate}:{$exists:true}, // 行业
    //               infoType: infoType, // 转让
    //               estateType: estateType?estateType:{$exists:true}, // 行业类型
    //               "estate.district": district?district:{$exists:true}, // 行政区
    //               "estate.shopArea": shopArea?shopArea:{$exists:true}, // 商圈
    //               "estate.transferFee": transferFee?transferFee:{$exists:true}, // 转让费
    //               "estate.subway": subway?subway:{$exists:true}, // 地铁
    //               "estate.area.max": area?area:{$exists:true}, // 面积
    //               "estate.rental.max":rental?rental:{$exists:true}, // 租金
    //               "estate.type":storetype.length > 0?{$in:storetype}:{$exists:true}, // 商铺类型
    //               "estate.city":CITY
    //         }
    //     }
    //     var sort = {
    //         createdAt: -1
    //     };
    //     if (sortrule == 'createdAt') {
    //         sort = {createdAt: -1}
    //     } else if (sortrule == 'rentaltodown' ) {
    //         sort = {'estate.rental': -1}
    //     } else if (sortrule == 'transfertodown' ) {
    //         sort = {'estate.transferFee': -1}
    //     } else if (sortrule == 'transfertotop' ) {
    //         sort = {'estate.transferFee': 1}
    //     } else if (sortrule == 'areatodown' ) {
    //         sort = {'estate.area': -1}
    //     } else if (sortrule == 'areatotop' ) {
    //         sort = {'estate.area': 1}
    //     }
    //
    //     var page = {
    //         index: pageindex?pageindex:1,
    //         size: 10
    //     }
    //     setTimeout(function(){
    //         window.location.href = SITE_ADDR+"/"+CITY+"/list?query="+JSON.stringify(query)+"&sort="+JSON.stringify(sort)+"&page="+JSON.stringify(page);
    //     },200);
    // }
    var keyword = ('{{@ query_state.title}}').split(',');
    function setquery(empty,barg,storetype,cate,estateType,district,shopArea,subway,transferFee,area,rental,sortrule,pageindex) {
        var query = null;
        if (infoType == 'Attorn') {
            query = {
                  category: cate.length > 0?cate:'', // 行业
                  infoType: infoType, // 转让
                  estateType: estateType?estateType:'', // 行业类型
                  "estate.district": district?district:'', // 行政区
                  "estate.shopArea": shopArea?shopArea:'', // 商圈
                  "estate.subway": subway?subway:'', // 地铁
                  "estate.transferFee": transferFee?transferFee:'', // 转让费
                  "estate.area": area?area:'', // 面积
                  "estate.rental":rental?rental:'', // 租金
                  "estate.type":storetype.length > 0?storetype:'', // 商铺类型
                  "estate.canEmptyAttorn": empty, // 空转
                  "estate.canBargaining": barg, // 议价
                  "site": SITE_ID,
                //   "estate.city":CITY,
                  title: keyword,
                  content: keyword,
            }
        } else {
            query = {
                  category: cate.length > 0?cate:'', // 行业
                  infoType: infoType, // 转让
                  estateType: estateType?estateType:'', // 行业类型
                  "estate.district": district?district:'', // 行政区
                  "estate.shopArea": shopArea?shopArea:'', // 商圈
                  "estate.transferFee": transferFee?transferFee:'', // 转让费
                  "estate.subway": subway?subway:'', // 地铁
                  "estate.area.max": area?area:'', // 面积
                  "estate.rental.max":rental?rental:'', // 租金
                  "estate.type":storetype.length > 0?storetype:'', // 商铺类型
                  "estate.canEmptyAttorn": empty, // 空转
                  "estate.canBargaining": barg, // 议价
                  "site": SITE_ID,
                //   "estate.city":CITY,
                  title: keyword,
                  content: keyword,
            }
        }
        var sort = {
            createdAt: -1
        };
        if (sortrule == 'createdAt') {
            sort = {createdAt: -1}
        } else if (sortrule == 'rentaltodown' ) {
            sort = {'estate.rental': -1}
        } else if (sortrule == 'transfertodown' ) {
            sort = {'estate.transferFee': -1}
        } else if (sortrule == 'transfertotop' ) {
            sort = {'estate.transferFee': 1}
        } else if (sortrule == 'areatodown' ) {
            sort = {'estate.area': -1}
        } else if (sortrule == 'areatotop' ) {
            sort = {'estate.area': 1}
        }

        var page = {
            index: pageindex?pageindex:1,
            size: 10
        }
        setTimeout(function(){
            for (var key in query) {
                if (!query[key]) {
                    delete query[key];
                }
            }
            window.location.href = SITE_ADDR+"/"+CITY+"/search?query="+JSON.stringify(query)+"&sort="+JSON.stringify(sort)+"&page="+JSON.stringify(page);
        },200);
    }


    var pubContent = $('.pub-content');
    var exchangeArr = [];
    pubContent.on('click','a.detail-exchange',function(){
        var pid = $(this).data('pid');
        if (exchangeArr.length < 3) {
            if ( !contains(exchangeArr,pid) ) {
                exchangeArr.push(pid);
                localStorage.setItem('exchange',JSON.stringify(exchangeArr));
                $('.ratio i').html(exchangeArr.length);
                $('.ratio').attr('href','/'+CITY+'/ratio?query='+exchangeArr);
            }
        } else if (exchangeArr.length >= 3) {
            bootbox.alert({
                size: 'smal',
                message: "对比栏已经满栏哦"
            });
        }
        console.log($(this).data('pid'))
    })
    function contains (arr, val) {
        return arr.indexOf(val) != -1 ? true : false;
    }
    // 分页
    var prePage = '{{@ pub_info.pageInfo.prePage }}';
    var nextPage = '{{@ pub_info.pageInfo.nextPage }}';
    var pageIndex = '{{@ pub_info.pageInfo.pageIndex}}';
    var totalPage = '{{@ pub_info.pageInfo.totalPage}}';
    var paginationLg = $('.pagination-lg');
    makePage( totalPage,pageIndex )
    function makePage ( total, page ) {
        var pages = [];
        pages.push('<li  class="disabled"><a data-page='+prePage+' href="#">«</a></li>')
        function createPage(index) {
            if(page==index){
                    pages.push('<li class="active"><a data-page='+(page)+' href="javascript:;">'+(page)+'<span class="sr-only">(current)</span></a></li>');
                }else{
                    pages.push('<li><a data-page='+(index)+' href="javascript:;">'+(index)+'</a></li>');
                }
        }
        if (total <= 10) {
            for (var i = 1; i <= total; i++) {
                createPage(i)
            }
        } else {
            if (page < 5) {
                for (var i = 1; i < 6; i++) {
                    createPage(i);
                }
                pages.push('<li><a href="javascript:;">...</a></li><li><a data-page='+(total)+' href="javascript:;">'+total+'</a></li>');
            } else {
                pages.push('<li><a data-page='+1+' href="javascript:;">'+1+'</a></li><li><a href="javascript:;">...</a></li>');
                for(var i=page*1-2;i<=page*1+2;i++){
                         createPage(i);
                }
                pages.push('<li><a href="javascript:;">...</a></li><li><a data-page='+(total)+' href="javascript:;">'+total+'</a></li>');
            }
        }
        pages.push('<li><a data-page='+nextPage+' href="javascript:;">»</a></li>')
        paginationLg.html('');
        paginationLg.append(pages.join(" "));
    }
    //
    // var html = '<li  class="disabled"><a data-page='+prePage+' href="#">«</a></li>';
    // for (var i = 0; i < totalPage; i++) {
    //     if ( i+1 == pageIndex ) {
    //         html += '<li class="active"><a data-page='+(i+1)+' href="javascript:;">'+(i+1)+'<span class="sr-only">(current)</span></a></li>';
    //     } else {
    //         html += '<li><a <a data-page='+(i+1)+' href="javascript:;">'+(i+1)+'</a></li>';
    //     }
    // }
    // html += '<li><a data-page='+nextPage+' href="javascript:;">»</a></li>';
    // paginationLg.html('');
    // paginationLg.append(html);
    paginationLg.find('li a').on('click',function(){
        var self = $(this);
        var pagenum = self.data('page');
        setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname,transfer,measure,rental,'',pagenum)
    })

    var $followMessage = $('.follow-message');
    $followMessage.on('click',function(){
        var self = this;
        followWatch(self);

    });
    function followWatch(self){
        var pid = $(self).data('pid');
        $.ajax({
            type: "put",
            contentType: "application/json",
            url: SITE_ADDR + "/info/"+pid+"/watch",
            success: function (data, textStatus) {
                followMessage(self);
            },
            complete: function (XMLHttpRequest, textStatus) {
                submiting = false;
            }
        });
    }
    function followMessage(self){
        var pid = $(self).data('pid');
        var uid = loginUser._id;
        $.ajax({
            type: "put",
            contentType: "application/json",
            url: SITE_ADDR+"/user/"+pid+"/"+uid+"/collection",
            success: function (data, textStatus) {
                if (data.ok) {
                    $(self).find('i').removeClass('fa-heart-o')
                    $(self).find('i').addClass('fa-heart')
                }
                else {
                    bootbox.alert('抱歉服务器出问题啦');
                }
            },
            complete: function (XMLHttpRequest, textStatus) {
                submiting = false;
            }
        });
    }
    // var $detaiHref = $('#detai-href');
    // $detaiHref.on('click',function(){
    //     window.
    // })
    $('#sortRule').on('click','a',function(){
        var sort = $(this).data('rule');
        setquery(empty,barg,storeArr,newcate,'',areaname,shopname,subname,transfer,measure,rental,sort)
    })
    function followView(pid){
        $.ajax({
            type: "put",
            contentType: "application/json",
            url: SITE_ADDR + "/info/"+pid+"/watch",
            success: function (data, textStatus) {
            },
            complete: function (XMLHttpRequest, textStatus) {
                submiting = false;
            }
        });
    }
    $('.detai-href').on('click','a',function(){
        event.preventDefault();
        var pid = $(this).data('pubid');
        followView(pid);
        window.location.href = $(this).attr('href');
    })
    </script>
  </body>
</html>
